import React, { Component } from 'react';
import pic1 from '../assets/1.jpg'
import pic2 from '../assets/2.png'
import pic3 from '../assets/3.jpg'
import pic4 from '../assets/4.jpg'


import "../styles/MyList.scss";


class MyList extends Component {
    constructor(props) {
        super(props);
        this.state = { //state中保存的值就是组件的状态
            list: [
                { pic: pic1, text: 'COSME DECORTE黛珂植物欣韵沁莹化妆水 20...', price: '￥270', money: '￥215' },
                { pic: pic2, text: 'COSME DECORTE黛珂牛油果乳液150ml', price: '￥303', money: '￥675' },
                { pic: pic3, text: 'COSME DECORTE黛珂植物欣韵沁莹化妆水 20...', price: '￥396', money: '￥195' },
                { pic: pic4, text: 'COSME DECORTE黛珂牛油果乳液150ml', price: '￥520', money: '￥425' },


            ]
        }
    }
    render() {
        return (
            <div className='MyList'>
                <div className="one">
                    {this.state.list.map((item, index) => {
                        return (
                            <div className="item" key={index}>
                                <div className="tu">
                                    <img src={item.pic} alt="" />
                                </div>
                                <div className="text">{item.text}</div>
                                <div className="price">{item.price}</div>
                                <div className="money">{item.money}</div>
                            </div>
                        )
                    })
                    }
                </div>

            </div>
        );
    }
}

export default MyList;